{% block sw_promotion_v2_cart_condition_form %}
<div class="sw-promotion-v2-cart-condition-form">

    {% block sw_promotion_v2_cart_condition_form_rules_field %}
    <sw-promotion-v2-rule-select
        v-if="promotion"
        v-model:collection="promotion.cartRules"
        class="sw-promotion-v2-cart-condition-form__rule-select-cart"
        :local-mode="promotion.isNew()"
        :criteria="ruleFilter"
        :label="$tc('sw-promotion-v2.detail.conditions.preConditions.labelCartConditionSelect')"
        :placeholder="$tc('sw-promotion-v2.detail.conditions.preConditions.placeholderCartConditionSelect')"
        :rule-scope="['checkout', 'global', 'lineItem']"
        rule-aware-group-key="cartPromotions"
        :disabled="isEditingDisabled"
    />
    {% endblock %}

    {% block sw_promotion_v2_cart_condition_form_use_setgroups_field %}

    <mt-switch
        v-model="promotion.useSetGroups"
        class="sw-promotion-v2-cart-condition-form__use-setgroups"
        :disabled="!acl.can('promotion.editor')"
        :label="$tc('sw-promotion-v2.detail.conditions.setgroups.switchGroupsEnabled')"
    />
    {% endblock %}

    <template v-if="promotion.useSetGroups">

        {% block sw_promotion_v2_cart_condition_setgroup_card %}
        <mt-card
            v-for="(group, index) in promotion.setgroups"
            :id="`sw-promotion-v2-cart-condition-form__setgroup-card-${index + 1}`"
            :key="group.id"
            position-identifier="sw-promotion-cart-condition-setgroup"
            class="sw-promotion-v2-cart-condition-form__setgroup-card"
        >

            {% block sw_promotion_v2_cart_condition_setgroup_card_context_action %}
            <template #context-actions>

                {% block sw_promotion_v2_cart_condition_setgroup_card_context_action_duplicate %}
                <sw-context-menu-item
                    :disabled="isEditingDisabled"
                    @click="duplicateSetGroup(group)"
                >
                    {{ $tc('global.default.duplicate') }}
                </sw-context-menu-item>
                {% endblock %}

                {% block sw_promotion_v2_cart_condition_setgroup_card_context_action_delete %}
                <sw-context-menu-item
                    v-tooltip="{
                        message: $tc('sw-privileges.tooltip.warning'),
                        disabled: acl.can('promotion.editor'),
                        showOnDisabledElements: true
                    }"
                    variant="danger"
                    :disabled="isEditingDisabled"
                    @click="deleteSetGroup(group)"
                >
                    {{ $tc('global.default.delete') }}
                </sw-context-menu-item>
                {% endblock %}

            </template>
            {% endblock %}

            {% block sw_promotion_v2_cart_condition_setgroup_card_title %}
            <div class="sw-promotion-v2-cart-condition-form__setgroup-card-title">
                {{ $tc('sw-promotion-v2.detail.conditions.setgroups.titleName') }} {{ index + 1 }}
            </div>
            {% endblock %}

            <sw-container
                columns="1fr 1fr"
                gap="0px 30px"
            >
                {% block sw_promotion_v2_cart_condition_setgroup_mode_field %}
                <mt-select
                    v-model="group.packagerKey"
                    class="sw-promotion-v2-cart-condition-form__setgroup-mode"
                    :label="$tc('sw-promotion-v2.detail.conditions.setgroups.labelMode')"
                    :disabled="isEditingDisabled"
                    :options="packagerOptions"
                />
                {% endblock %}

                {% block sw_promotion_v2_cart_condition_setgroup_value_field %}
                <mt-number-field
                    v-model="group.value"
                    class="sw-promotion-v2-cart-condition-form__setgroup-value"
                    :label="$tc('sw-promotion-v2.detail.conditions.setgroups.labelValue')"
                    :disabled="isEditingDisabled"
                />
                {% endblock %}

            </sw-container>

            <sw-container
                columns="1fr 1fr"
                gap="0px 30px"
            >
                {% block sw_promotion_v2_cart_condition_setgroup_sorting_field %}
                <mt-select
                    v-model="group.sorterKey"
                    class="sw-promotion-v2-cart-condition-form__setgroup-sorting"
                    :label="$tc('sw-promotion-v2.detail.conditions.setgroups.labelSorting')"
                    :disabled="isEditingDisabled"
                    :options="sorterOptions"
                />
                {% endblock %}

            </sw-container>

            <sw-container
                columns="1fr"
                gap="0px 30px"
            >

                {% block sw_promotion_v2_cart_condition_setgroup_rules_field %}
                <sw-promotion-v2-rule-select
                    v-model:collection="group.setGroupRules"
                    class="sw-promotion-v2-cart-condition-form__setgroup-rules"
                    :label="$tc('sw-promotion-v2.detail.conditions.setgroups.labelRules')"
                    :placeholder="$tc('sw-promotion-v2.detail.conditions.setgroups.placeholder')"
                    :criteria="ruleFilter"
                    :rule-scope="['checkout', 'global', 'lineItem']"
                    :disabled="isEditingDisabled"
                    rule-aware-group-key="promotionSetGroups"
                />
                {% endblock %}

            </sw-container>
        </mt-card>
        {% endblock %}

        {% block sw_promotion_v2_cart_condition_add_group_button %}
        <div class="sw-promotion-v2-cart-condition-form__add-group-button-container">
            <mt-button
                ghost
                class="sw-promotion-v2-cart-condition-form__add-group-button"
                :disabled="isEditingDisabled"
                variant="secondary"
                @click="addSetGroup"
            >
                {{ $tc('sw-promotion-v2.detail.conditions.setgroups.buttonAddGroup') }}
            </mt-button>
        </div>
        {% endblock %}

    </template>
</div>
{% endblock %}
